<template>
  <div style="height: auto;">
    <!-- 按钮 -->
    <Row>
      <i-col span="24" class-name="y_query_right">
        <Input class="y_condition" v-model="tabSearch.name" :clearable=true placeholder="标签名称"/>
        <Button class="y_condition" type="primary" icon="md-search" @click="searchTab">查询</Button>
      </i-col>

    </Row>
<!--    <hr style="margin-top: 20px; margin-bottom: 20px; border: 0.5px #f1f1f1 solid;">-->

    <Row>
      <div class="tip_div"  v-show="tabList.length === 0">
        <strong>操作提示 :  </strong>
        <br><br>
        <p>1. 产品标签的创建在"其他管理模块"</p>
        <p>2. 目前仅支持：为产品增加仿牌的标签，系统将不允许Google收录这些产品</p>
      </div>
    </Row>

    <List style="border-top: 1px solid #e8eaec;border-bottom: 1px solid #e8eaec;margin-top: 1rem;margin-bottom: 1rem;">
      <list-item class="list_item" v-for="(item,index) in tabList">
        <div style="width:100%;padding: 0 0.5rem;"  >
          <Row type="flex" justify="space-between">
            <i-col flex="auto" style="text-align: left" >
              <KeyValueView>#{{index+1}}</KeyValueView>
              <KeyValueView title="标签名称">{{item.name}}</KeyValueView>
              <KeyValueView title="标签类型" >{{showTypeName(item.type)}}</KeyValueView>
              <KeyValueView  title="创建时间" >{{ $tiyBJTime(item.createtime) }}</KeyValueView>
            </i-col>
            <i-col>
              <Button ghost size="small" icon="md-add" type="primary" @click="showMappingsModal(item.type,true,item.id)" style="margin-right: 0.5rem">添加{{showTypeName(item.type)}}</Button>
              <Button ghost size="small" icon="md-remove" type="error"  @click="showMappingsModal(item.type,false,item.id)" >移除{{showTypeName(item.type)}}</Button>
            </i-col>
          </Row>
        </div>
      </list-item>
    </List>

    <!--表格和分页-->
<!--    <Table stripe border class="base_table" ref="tabTable" :columns="tabColumns" :data="tabList" :no-data-text="page.tabPage.noDataText"
           :loading="page.tabPage.tableLoading">
    </Table>-->
    <div style="text-align: right;">
      <Page :total="page.tabPage.total" :current="page.tabPage.currentPage" :page-size="page.tabPage.stepNumber" :page-size-opts="page.tabPage.pageSizeOpts"
          show-elevator show-sizer transfer @on-change="changeTabPage" style="margin-right: 10px;"/>
    </div>

    <!-- 弹窗 -->
    <Modal v-model="status.mappingModal.isShow" :title="status.mappingModal.title" :width="status.mappingModal.width" :mask-closable="false">
<!--      <Table stripe border class="base_table" ref="selection" :columns="mappingColumns" :data="mappingList" :no-data-text="page.mappingPage.noDataText"
             @on-selection-change="changeSelectedMappings" :loading="page.mappingPage.tableLoading" >
      </Table>-->
      <div>
        <!-- 产品分类查询 -->
        <div v-show="param.tabType==1" style="display: inline-block; width: 400px; margin-left: 10px;">
          <Cascader ref="categorySearch" :data="categoryList" @on-change="categorySelected" change-on-select clearable placeholder="产品分类"></Cascader>
        </div>
        <div style="display: inline-block; width: 300px;">
          <Input v-model.trim="param.search" :placeholder="status.mappingModal.searchPlaceHolder" clearable/>
        </div>
        <div style="display: inline-block; width: 100px;">
          <Button type="primary" icon="ios-search" @click="queryMappings()">查询</Button>
        </div>
      </div>

      <List style="border-bottom: 1px solid #e8eaec;margin-top: 1rem;margin-bottom: 1rem;">
        <ListItem style="display: flex;flex-direction: column;align-items: flex-start;margin-left: 1rem;">
          <Checkbox v-model="isCheckedAllMessage" @on-change="handleCheckAll">全选</Checkbox>
        </ListItem>
        <CheckboxGroup v-model="param.selectedMappings" @on-change="checkChange">
          <list-item class="list_item" v-for="(item,index) in mappingList">
            <div style="width:100%;padding: 0 0.5rem;"  >
              <Row type="flex" justify="start" align="middle">
                <i-col  :xs="3" :sm="1">
                  <Checkbox  :label="item" :value="index">{{ check }}</Checkbox>
                </i-col>
                <i-col  :xs="21" :sm="2" style="text-align: left">
                  <img :src="getProductZipImage(item)"
                       style="width:99%;max-width:100px;max-height:100px;"/>
                </i-col>
                <i-col :xs="24" :sm="21" style="text-align: left" >
                  <KeyValueView>#{{index+1}}</KeyValueView>
                  <KeyValueView title="SKU">{{item.code}}</KeyValueView>
                  <KeyValueView title="状态">{{item.state==-1?"已下架":(item.state==0?"已上架":"已删除")}}</KeyValueView>
                  <KeyValueView oneline title="产品名">{{item.name}}</KeyValueView>
                </i-col>
              </Row>
            </div>
          </list-item>
        </CheckboxGroup>
      </List>


      <div style="text-align: right;">
        <Page :total="page.mappingPage.total" :current="page.mappingPage.currentPage" :page-size="page.mappingPage.stepNumber" :page-size-opts="page.mappingPage.pageSizeOpts"
              show-elevator show-sizer transfer @on-change="changeMappingsPage" @on-page-size-change="changeMappingsPageSize" style="margin-right: 10px;"/>
      </div>
      <div slot="footer">
        <Button type="primary" @click="saveMappings()">{{status.mappingModal.okText}}</Button>
        <Button @click="hideMappingsModal()">取消</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import tiyData from "./js/manageTab/tab_mapping_data";
import {init, listTabs, getTypeName, queryProducts, queryUsers, queryOrders, saveTabMappings, deleteTabMappings} from "./js/manageTab/tab_mapping_fun";
import {createCategoryList, getProductCommonData} from "../js/commonUtils";
import KeyValueView from "../widgets/KeyValueView";
import {selectedChange} from "./js/list/list_funs";

export default {
  data() {
    return {
      batchButtonText: "批量添加",
      constData: tiyData.tConst,
      param: tiyData.tParam,
      tabColumns: tiyData.tTable.tabTable(this),
      tabList: tiyData.tData.tabList,
      page: tiyData.tPage,
      status: tiyData.tStatus,
      mappingColumns: [],
      mappingList: tiyData.tData.mappingList,
      tabSearch: {
        type: 0,
        name: "",
      },
      yunPath: this.$store.getters.imgPrefix,
      categoryList: tiyData.tData.categoryList,
      check: '',
      isCheckedAllMessage: false,
    }
  },
  methods: {
    /*showAddMappingsModal() {
      if(tiyData.tParam.selectedTabs!=null && tiyData.tParam.selectedTabs.length>0) {
        this.initMappingsModal(tiyData.tParam.tab.type, true);
        tiyData.tParam.tabIds = tiyData.tParam.selectedTabs.map(tab => {return tab.id});
        tiyData.tStatus.mappingModal.isShow = true;
      }else{
        this.$Message.error("请先选择标签！");
      }
    },
    isBatchAddBtnDisabled() {
      return tiyData.tParam.tab.type==null || tiyData.tParam.tab.type==0;
    },*/
    checkChange() {
      if (this.param.selectedMappings.length == this.mappingList.length) {
        this.isCheckedAllMessage = true;
      } else {
        this.isCheckedAllMessage = false;
      }
    },
    handleCheckAll() {
      this.param.selectedMappings.splice(0, this.param.selectedMappings.length);
      if (this.isCheckedAllMessage) {
        this.param.selectedMappings=[...this.mappingList];
      }
    },
    getProductZipImage(product){
      let imageUrl = product.productImg;
      let self=this;
      if(product.productShowImg!=null&&product.productShowImg.zipImgs!=null){
        let zipImg = product.productShowImg.zipImgs;
        zipImg.forEach(function (item){
          if(item.size=="200w"){
            imageUrl=self.yunPath+item.imagePath;
          }
        })
      }
      return !imageUrl ? '' : imageUrl;
    },
    showMappingsModal(type, isAdd, tabId) {
      this.initMappingsModal(type, isAdd, tabId);
      this.param.selectedMappings.splice(0, this.param.selectedMappings.length);
      tiyData.tStatus.mappingModal.isShow = true;
    },
    hideMappingsModal() {
      tiyData.tStatus.mappingModal.isShow = false;
    },
    initMappingsModal(type, isAdd, tabId) {
      //初始化弹窗
      this.initModalText(type, isAdd);

      //初始化相关参数
      this.initMappingsParams(type, isAdd, tabId);

      //初始化搜索框
      this.initModalSearchBox(type);

      //初始化表格分页
      this.initMappingsPage();

      //初始化表头
      this.initModalTableHeaders();

      //查询标签映射关系对象
      this.queryMappings();
    },
    getPlaceHolder(type) {
      switch (type) {
        case 1:
          return "输入产品名称或编号";
        case 2:
          return "输入用户名或电话";
        case 3:
          return "输入订单流水号或用户名";
        default:
          return "";
      }
    },
    searchTab() {
      tiyData.tParam.tab.type = this.tabSearch.type;
      tiyData.tParam.tab.name = this.tabSearch.name;
      tiyData.tPage.tabPage.currentPage = 1;
      // this.batchButtonText = "批量添加"+getTypeName(this.tabSearch.type);
      listTabs(this, tiyData);
    },
    showTypeName(type){
      return getTypeName(type);
    },
    /*changeSelectedTabs(selection) {
      tiyData.tParam.selectedTabs = selection;
      // console.log(tiyData.tParam.selectedTabs);
    },*/
    changeSelectedMappings(selection) {
      tiyData.tParam.selectedMappings = selection;
      // console.log(tiyData.tParam.selectedMappings);
    },
    initModalText(type, isAdd) {
      let title = "移除";
      if(isAdd) {
        title = "添加";
      }
      tiyData.tStatus.mappingModal.okText = title;
      title += getTypeName(type);
      tiyData.tStatus.mappingModal.title = title;//弹窗标题
    },
    initModalSearchBox(type) {
      tiyData.tStatus.mappingModal.searchPlaceHolder = this.getPlaceHolder(type);//弹窗搜索框提示
      tiyData.tParam.search = "";
      if(type == 1) {
        this.$refs.categorySearch.clearSelect();
      }
    },
    initModalTableHeaders() {
      //初始化弹窗表格
      switch (tiyData.tParam.tabType) {
        case this.constData.tabType.product:
          this.mappingColumns = tiyData.tTable.productTable(this);
          break;
        case this.constData.tabType.user:
          this.mappingColumns = tiyData.tTable.userTable(this);
          break;
        case this.constData.tabType.order:
          this.mappingColumns = tiyData.tTable.orderTable(this);
          break;
      }
    },
    initMappingsPage() {
      tiyData.tPage.mappingPage = {
        total: 0,
        startIndex: 0,
        stepNumber: 40,
        currentPage: 1,
        pageSizeOpts: [40, 60, 80, 120],
        tableLoading: true,
        noDataText: "正在查询..."
      };
    },
    initMappingsParams(type, isAdd, tabId) {
      tiyData.tParam.tabId = tabId;
      tiyData.tParam.isAddMappings = isAdd;
      tiyData.tParam.tabType = type;
      tiyData.tParam.chosenCategory.id = "";
      tiyData.tParam.chosenCategory.level = 1;
    },
    queryMappings() {
      //初始化弹窗表格
      switch (tiyData.tParam.tabType) {
        case this.constData.tabType.product:
          this.queryProducts();
          break;
        case this.constData.tabType.user:
          this.queryUsers();
          break;
        case this.constData.tabType.order:
          this.queryOrders();
          break;
      }
    },
    queryProducts() {
      queryProducts(this, tiyData);
    },
    queryUsers() {
      queryUsers(this, tiyData);
    },
    queryOrders() {
      queryOrders(this, tiyData);
    },
    changeTabPage(pageNum) {
      tiyData.tPage.tabPage.currentPage = pageNum;
      listTabs();
    },
    changeMappingsPage(pageNum) {
      tiyData.tPage.mappingPage.currentPage = pageNum;
      this.queryMappings();
    },
    changeMappingsPageSize(pageSize) {
      tiyData.tPage.mappingPage.stepNumber = pageSize;
      this.queryMappings();
    },
    //保存映射关系
    saveMappings() {
      if(tiyData.tParam.selectedMappings.length > 0) {
        let self = this;
        this.$Modal.confirm({
          title: "确认",
          content: "确认要"+tiyData.tStatus.mappingModal.okText+"这些"+getTypeName(tiyData.tParam.tabType)+"吗?",
          onOk: () => {
            if(tiyData.tParam.isAddMappings) {
              saveTabMappings(self, tiyData);
            }else{
              deleteTabMappings(self, tiyData);
            }
          }
        });
      }else{
        this.$Message.error("请先选择"+getTypeName(tiyData.tParam.tabType));
      }
    },
    categorySelected(value, selectedData) {
      // console.log(selectedData);
      if (0 < selectedData.length) {
        tiyData.tParam.chosenCategory.id = selectedData[selectedData.length - 1].value;
        tiyData.tParam.chosenCategory.level = selectedData[selectedData.length - 1].level;
      } else {
        tiyData.tParam.chosenCategory.id = '';
        tiyData.tParam.chosenCategory.level = 1;
      }
    },
  },
  components:{KeyValueView},
  mounted() {
    init(this, tiyData);
    //查询标签列表
    // listTabs(this, tiyData);
    //查询产品分类
    let types = [];
    types.push(3);
    getProductCommonData(this, tiyData.tData.categoryList, types, true, createCategoryList);
  }
}
</script>

<style scoped lang="less">
@import  (once,optional)  "../css/base";

.list_item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.list_item:hover {
  background: @tiySectionColor;
}
</style>
